
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>客房类型列表</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/global.css">
    <link rel="stylesheet" href="../css/admin.css">
    <script src="../layui/layui.js"></script>
</head>
<body style="padding-top: 10px">
<!-- 搜索表单开始 -->
<form class="layui-form">

    <div class="layui-inline">
        <input type="button" id="addBtn" class="layui-btn" data-type="reload" value="添加">
    </div>
</form>
<!-- 搜索表单结束 -->

<!-- 动态表格 -->
<table border="1" width="80%" align="center" class="layui-table" id="table" lay-filter="table">
</table>

<!-- 工具条 -->
<script type="text/html" id="optionBar">
   <a class="layui-btn layui-btn-normal" lay-event="delete">删除</a>
   <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update">修改</a>
   <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看详情</a>
</script>

<!-- 添加表单开始 -->
<div id="addContainer" style="display: none">
    <form class="layui-form" id="addForm" lay-filter="example" style="margin: 1rem">

        <div class="layui-form-item">
            <label class="layui-form-label">客房编号</label>
            <div class="layui-input-block">
                <input type="text" id="add-roomTypeId" name="roomTypeId"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">客房类型</label>
            <div class="layui-input-block">
                <input type="text" id="add-roomType" name="roomType"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-block">
                <img id="pic" src='../images/room/11.jpg' style="width:80px;height:80px" />
                <span id="upload_tips"></span>
            </div>
        </div>

        <!-- 用于记录上传图片的名称，用于存储在数据库中 -->
        <input type="hidden" id="last_image" value="default.jpg"/>
    </form>
</div>
<!-- 添加表单结束 -->



<!-- 修改表单开始 -->
<div id="updateContainer" style="display: none">
    <form class="layui-form" id="updateForm" lay-filter="example" style="margin: 1rem">

        <div class="layui-form-item">
            <label class="layui-form-label">客房编号</label>
            <div class="layui-input-block">
                <input type="text" id="update-roomTypeId" name="roomTypeId"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">客房类型</label>
            <div class="layui-input-block">
                <input type="text" id="update-roomType" name="roomType"
                       autocomplete="off" class="layui-input" />
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-block">
                <img id="update_pic" src='../images/room/11.jpg' style="width:80px;height:80px" />
                <span id="update_upload_tips"></span>
            </div>
        </div>

        <!-- 用于记录上传图片的名称，用于存储在数据库中 -->
        <input type="hidden" id="update_last_image" value="default.jpg"/>
    </form>
</div>
<!-- 修改表单结束 -->


<script>
    layui.use(['jquery', 'table', 'layer', 'form'], function () {

        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;


        // 2.动态加载数据，回显到页面中（渲染数据）
        table.render({
            elem: '#table',
            id: 'tableReload',
            where:{
            roomStates:1
        },
            url:'/listRoomPred',
            title: '管理员列表',
            cols: [[
                {field:'roomId', width:'6%', title: '客房编号',align:'center'},
                {field:'roomName', width:'8%', title: '客房名称',align:'center'},
                {field:'roomPrice', width:'6%', title: '价格' ,align:'center'},
                {
                    field:'roomStates', width:'6%', title: '状态' ,align:'center',
                    templet:function (row) {
                        if(row.roomStates==1) {
                            return '否';
                        }
                        return '是';
                    }

                },
                {field:'rpLaaId', width:'6%', title: '预定编号' ,align:'center'},
                {field:'predetermineDate', width:'6%', title: '入住天数' ,align:'center'},
                {field:'checkoutTime', width:'8%', title: '退房时间' ,align:'center'},
                {field:'preDaterMineTime', width:'8%', title: '入住时间' ,align:'center'},
                {field:'numbers', width:'6%', title: '住房人数' ,align:'center'},
                {field:'uname', width:'6%', title: '姓名' ,align:'center'},
                {field:'roomCard', width:'10%', title: '身份证' ,align:'center'},
                {field:'telephone', width:'10%', title: '号码' ,align:'center'},

                {fixed: 'right', title: '操作', toolbar: '#optionBar',align:'center'},
            ]],

            page: true,
            limit: 5,
            limits: [5, 10],
        });
        // // 4.监听工具条中相关的按钮，实现相关的操作
        // // 监听 table 行工具事件 - 实现删除与修改操作
        // table.on('tool(table)', function (obj) {
        //     // 获取当前行的数据
        //     let currentRow = obj.data;
        //
        //     // 获取table工具条件的具体事件，事件名称通过lay-event定义
        //     let layuiEvent = obj.event;
        //
        //     // 判断用户单击哪个按钮
        //     if (layuiEvent === 'delete') {
        //
        //         // 弹出删除确认框，index为确认框的唯一索引
        //         layer.confirm('是否确定删除？', function (index) {
        //             $.ajax({
        //                 url: '/deleteRoomType',
        //                 type: 'get',
        //                 data: {
        //                     'roomTypeId': currentRow.roomTypeId,
        //                 },
        //                 success: function (res) {
        //                     if (res.code == 200) {
        //                         // 重新加载表格数据
        //                         table.reload('tableReload', {page: {curr: 1}});
        //                         // 通过index索引关闭确认框
        //                         layer.close(index);
        //                         // 提示
        //                         layer.msg(res.message);
        //                         return;
        //                     }
        //                     layer.msg(res.message);
        //                 }
        //             });
        //         });
        //
        //     } else if (layuiEvent === 'update') {
        //         let r = obj.data;
        //         $("#update-roomTypeId").val(r.roomTypeId);
        //         $("#update-roomType").val(r.roomType);
        //         // $("#update_pic").prop("src","../images/room/" + currentRow.roomTypeImage) ;
        //         $("#last_image").val(r.roomTypeImage);
        //
        //         // 重新渲染表单
        //         form.render();
        //
        //         layer.open({
        //             type: 1,
        //             title: '修改客房类型',
        //             area: ['50%', '35em'],
        //             resize: false,
        //             content: $("#updateContainer"),
        //             btn: ['修改', '取消'],
        //             btn1: function (index) {
        //                 $.ajax({
        //                     url: '/updateRoomType',
        //                     method: 'post',
        //                     data: $("#updateForm").serialize(),
        //                     success: function (res) {
        //                         console.log(res)
        //                         layer.msg(res.message)
        //                         // 根据弹出层的索引，关闭弹出确认框
        //                         layer.close(index);
        //
        //                         if (res.code == 200) {
        //                             table.reload('table_data', {page: {curr: 1}});
        //                         }
        //                     }
        //                 })
        //             }
        //         });
        //     }
        //
        // });


        // 6.添加数据 - 弹出添加表单
        $("#addBtn").click(function () {
            layer.open({
                type: 1,
                title: '添加客房预定信息',
                area: ['50%', '35em'],
                resize: false,
                content: $("#addContainer"),
                btn: ['确定', '取消'],
                // 确定按钮
                btn1: function (index) {
                    $.ajax({
                        url: '/addRoomType',
                        method: 'post',
                        data: {
                            roomTypeId: $("#add-roomTypeId").val(),
                            roomType: $("#add-roomType").val(),
                            roomTypeImage: $("#last_image").val()
                        },
                        success: function (res) {
                            console.log(res)
                            // 弹出提示框
                            layer.msg(res.message)
                            // 根据弹出层的索引，关闭弹出确认框
                            layer.close(index);

                            if (res.code == 200) {
                                // 重新加载表格数据
                                table.reload('tableReload', {page: {curr: 1}});
                            }
                        }
                    });
                },
            });
        });








    });




</script>

</body>
</html>
